import React, { useEffect, useState } from "react";
import styles from "./index.module.less";
import Pagin from "@components/pagin";
import { connect } from "react-redux";
import { getMyGoodsAction, operationMyGoddsAction } from "@redux/actions";
import profile from "@depjs/profile";
import numberToFixed2 from "@utils/numberToFixed2";

const Goods = (props) => {
    const {
        mygoods,
        getMyGoodsAction,
        isOperationSuccess,
        operationMyGoddsAction,
    } = props;

    const [currentPage, setCurrentPage] = useState(1);

    const onPageChange = (page) => {
        console.log("page: ", page);
        setCurrentPage(page);
    };

    useEffect(() => {
        profile.ready(() => {
            console.log(profile.userName);
            profile.userName && getMyGoodsAction(profile.userName);
        });
    }, [getMyGoodsAction]);

    useEffect(() => {
        if (isOperationSuccess) {
            // 如果操作成功
            getMyGoodsAction(); // 重新获取上架商品列表
        }
    }, [isOperationSuccess, getMyGoodsAction]);

    return (
        <div className={styles.goods}>
            <header className={styles.header}>
                <p className={styles.p1}>序号</p>
                <p className={styles.p2}>名称</p>
                <p className={styles.p3}>品牌</p>
                <p className={styles.p4}>编号</p>
                <p className={styles.p5}>价格</p>
                <p className={styles.p6}>销售状态</p>
                <p className={styles.p7}>操作</p>
            </header>
            <ul className={styles.goods_ul}>
                {mygoods
                    .slice((currentPage - 1) * 20, currentPage * 20)
                    .map((item, index) => {
                        return (
                            <li key={item.goodsId}>
                                <p className={styles.p1}>{index + 1}</p>
                                <p className={styles.p2}>{item.goodsName}</p>
                                <p className={styles.p3}>{item.brand}</p>
                                <p className={styles.p4}>{item.onSaleDate}</p>
                                <p className={styles.p5}>
                                    {numberToFixed2(item.price)}G币
                                </p>
                                <p className={styles.p6}>
                                    {item.goodsStatus === 1
                                        ? "在售"
                                        : item.goodsStatus === 2
                                        ? "已下架"
                                        : item.goodsStatus === 3
                                        ? "已售出"
                                        : "其他"}
                                </p>
                                <p className={styles.p7}>
                                    {item.goodsStatus === 2 && (
                                        <button
                                            onClick={() => {
                                                operationMyGoddsAction(
                                                    item.goodsId,
                                                    1
                                                );
                                            }}
                                        >
                                            上架
                                        </button>
                                    )}
                                    {item.goodsStatus === 1 && (
                                        <button
                                            onClick={() => {
                                                operationMyGoddsAction(
                                                    item.goodsId,
                                                    2
                                                );
                                            }}
                                        >
                                            下架
                                        </button>
                                    )}
                                    {item.goodsStatus === 2 && (
                                        <button>编辑</button>
                                    )}
                                    {item.goodsStatus !== 1 && (
                                        <button
                                            onClick={() => {
                                                operationMyGoddsAction(
                                                    item.goodsId,
                                                    4
                                                );
                                            }}
                                        >
                                            删除
                                        </button>
                                    )}
                                </p>
                            </li>
                        );
                    })}
            </ul>
            <Pagin
                onPageChange={onPageChange}
                total={mygoods ? mygoods.length : 0}
            />
        </div>
    );
};

export default connect(
    (state) => ({
        mygoods: state.getMyGoodsReducer.reverse(),
        isOperationSuccess: state.operationMyGoddsReducer,
    }),
    { getMyGoodsAction, operationMyGoddsAction }
)(Goods);
